<template>
  <main>

    <!-- 通用头部 -->
    <c-header :menus="[]"/>

    <am-container>
      <article class="dg-art">
        <am-row>
          <!-- 注意事项说明 -->
          <div class="am-u-sm-12 am-u-md-2">
            注意事项说明
            <p>
              .....[补充]
            </p>
          </div>

          <!-- 注册内容 -->
          <div class="am-u-sd-12 am-u-md-10">
            <form class="am-form am-form-horizontal">
              <fieldset>
                <legend>大赛帐号注册</legend>

                <!-- 姓名name -->
                <div :class="['am-form-group', 'am-form-group-sm', 'am-form-feedback', { 'am-form-icon am-form-error': !validator.name.vld }]">
                  <label class="am-u-sm-12 am-u-md-2 am-form-label" for="name">姓名</label>
                  <div class="am-u-sm-12 am-u-md-5">
                    <am-input id="name" placeholder="姓名" autocomplete="off" v-model="registerForm.name" />
                    <template v-if="!validator.name.vld">
                      <span class="am-icon-times"></span>
                      <small class="am-text-danger">{{ validator.name.msg }}</small>
                    </template>
                  </div>
                  <div class="am-u-end"></div>
                </div>

                <!-- 性别sex -->
                <div class="am-form-group am-form-group-sm">
                  <label class="am-u-sm-2 am-form-label" for="sex">性别</label>
                  <div class="am-u-sm-5">
                    <am-radio-group v-model="sex" id="sex" style="padding-top: .3rem;">
                      <am-radio label="男"></am-radio>
                      <am-radio label="女"></am-radio>
                    </am-radio-group>
                  </div>
                  <div class="am-u-end"></div>
                </div>             

                <!-- 手机tel -->
                <div :class="['am-form-group', 'am-form-group-sm', 'am-form-feedback', { 'am-form-icon am-form-error': !validator.tel.vld }]">
                  <label class="am-u-sm-12 am-u-md-2 am-form-label" for="tel">手机</label>
                  <div class="am-u-sm-12 am-u-md-5">
                    <am-input id="tel" type="tel" placeholder="手机" autocomplete="off" v-model="registerForm.tel" />
                    <template v-if="!validator.tel.vld">
                      <span class="am-icon-times"></span>
                      <small class="am-text-danger">{{ validator.tel.msg }}</small>
                    </template>
                  </div>
                  <div class="am-u-sm-12 am-u-md-5">
                    <p></p>
                  </div>
                  <div class="am-u-end"></div>
                </div>

                <!-- password -->
                <div :class="['am-form-group', 'am-form-group-sm', 'am-form-feedback', { 'am-form-icon am-form-error': !validator.password.vld }]">
                  <label class="am-u-sm-12 am-u-md-2 am-form-label" for="password">密码</label>
                  <div class="am-u-sm-12 am-u-md-5">
                    <am-input id="password" type="password" placeholder="密码" v-model="password" />
                    <template v-if="!validator.password.vld">
                      <span class="am-icon-times"></span>
                      <small class="am-text-danger">{{ validator.password.msg }}</small>
                    </template>
                  </div>
                  <div class="am-u-sm-12 am-u-md-5">
                    <p></p>
                  </div>
                  <div class="am-u-end"></div>
                </div>

                <!-- repassword -->
                <div :class="['am-form-group', 'am-form-group-sm', 'am-form-feedback', { 'am-form-icon am-form-error': !validator.rePassword.vld }]">
                  <label class="am-u-sm-12 am-u-md-2 am-form-label" for="repassword">确认密码</label>
                  <div class="am-u-sm-12 am-u-md-5">
                    <am-input id="repassword" type="password" placeholder="确认密码" v-model="rePassword" />
                    <template v-if="!validator.rePassword.vld">
                      <span class="am-icon-times"></span>
                      <small class="am-text-danger">{{ validator.rePassword.msg }}</small>
                    </template>
                  </div>
                  <div class="am-u-end"></div>
                </div>

                <!-- 自我介绍introduction -->
                <div class="am-form-group am-form-group-sm">
                  <label class="am-u-sm-12 am-u-md-2 am-form-label" for="introduction">自我介绍</label>
                  <div class="am-u-sm-12 am-u-md-10">
                    <textarea class="am-form-field" rows="5" placeholder="几句话介绍自己" id="introduction"
                      v-model="registerForm.introduction"></textarea>
                  </div>
                  <div class="am-u-end"></div>
                </div>

                <!-- 提交表单 -->
                <div class="am-form-group am-form-group-sm">
                  <div class="am-u-sm-12 am-u-md-10 am-u-md-offset-2">
                    <button type="button" class="am-btn am-btn-default am-btn-sm" v-if="!submitAbled" disabled>确认提交（请先完善上述信息）</button>
                    <button type="button" class="am-btn am-btn-default am-btn-sm" v-else @click="submit">确认提交</button>
                    <button type="reset" class="am-btn am-btn-default am-btn-sm">重置</button>
                  </div>
                </div>
              </fieldset>
            </form>
          </div>
        </am-row>
      </article>
    </am-container>

    <am-alert
      :is-show.sync="alertVisible"
      title="注册成功"
      @submit="alertSubmit"
      submit-btn-text="返回首页"
      :close-via-dimmer="false">
      <h6>使用手机号码登录</h6>
    </am-alert>
   <!-- 底部 -->
       <dg-footer />
  </main>
</template>

<script>
import Header from '@/dg_components/DgHeader'
import DgFooter from '@/views2/Footer'// 底部
import regexUtil from 'regex-util'
import md5 from 'md5'

export default {
  data() {
    return {
      loginID: '',// 注册成功后返回的id
      alertVisible: false,// 提示框
      registerForm: {// 注册表单信息
        name: '',
        sex: '1',// 默认男
        tel: '',
        password: '',
        introduction: ''
      },


      /**
       * @description - 需要校验的字段，true代表校验通过
       *  默认值为true，保证第一次访问的渲染效果，提交前会重新验证一遍
       */
      validator: {
        name: {
          vld: true, msg: '名称必填'
        },
        tel: {
          vld: true, msg: '手机号码格式不正确'
        },
        password: {
          vld: true, msg: '6-12位长度、不得使用特殊字符'
        },
        rePassword: {
          vld: true, msg: '确认密码不正确'
        },
      },

      password: '',// 密码验证
      rePassword: '',
      sex: '男',


      /**
       * 属性非响应式使用
       */
      /**
       * @description - 字段验证逻辑，true通过验证
       */
      validate: {
        // 名称不为空
        'registerForm.name': (val = this.registerForm.name) => this.validator.name.vld = !!val,
        // 手机正则验证
        'registerForm.tel': (val = this.registerForm.tel) => this.validator.tel.vld = regexUtil.isPhone(val),
        // 密码格式正则验证（6-12位长度、不得使用特殊字符）
        'password': (val = this.password) => this.validator.password.vld = regexUtil.isPassword(val, false, false, 6, 12),
        // 二次密码验证
        'rePassword': (val = this.rePassword) => this.validator.rePassword.vld = this.password === val ? true : false,
      }
    }
  },
  computed: {
    submitAbled() {// 是否可以提交
      if(
        this.registerForm.name === '' ||
        this.registerForm.tel === '' ||
        this.password === '' ||
        this.rePassword ===''
      ) {
        return false;
      } else {// 全填触发验证
        return this.goValidation();
      }
    }
  },
  components: {
    CHeader: Header,
    DgFooter
  },
  methods: {
    ready() {
    },

    /**提交前的表单验证 */
    goValidation() {
      let isPass = true;// 表单是否通过所有验证

      Object.values(this.validate).forEach(fun => {
        // 提交前把所有validate走一遍，并触发提示
        isPass = fun() && isPass;
      });
      return isPass;
    },
    /**提交注册 */
    submit() {
      // TODO: 注册接口参数压缩
      this.registerForm.password = md5(this.password);
      const data = this.structure.REGISTER(this.registerForm);
      this.dgpost(this.api.REGISTER, data)
      .then(res => {
        this.$store.commit('setDesignerLoginID', this.registerForm.tel);
        this.loginID = this.registerForm.tel;
        this.alertVisible = true;
      }).catch(err => {
        this.$message({
          title: '注册失败',
          type: 'error',
          message: err.msg,
          closeable: true
        });
      });
    },
    /**返回首页 */
    alertSubmit() {
      this.alertVisible = false;
      setTimeout(() => this.$router.push('/'), 199);
    }
  },
  watch: {

    /**
     * 输入同时验证
     */

    /**1-男、2-女 */
    sex(val) {
      if(val === '男') {
        this.registerForm.sex = '1';
      } else {
        this.registerForm.sex = '2';
      }
    },
    'registerForm.name': function(val) {
      this.validate['registerForm.name'](val);
    },
    'registerForm.tel': function(val) {
      this.validate['registerForm.tel'](val);
    },
    'password': function(val) {
      this.validate['password'](val);
      this.validate['rePassword'](this.rePassword);
    },
    'rePassword': function(val) {
      this.validate['rePassword'](val);
      this.validate['password'](this.password);
    }
  },
  mounted() {
    this.ready();
  }
}
</script>
<style scoped>
.dg-art {
  min-height: 700px;
}
</style>
